import { useState, useRef, memo, useEffect } from 'react'
import { Tabs, SearchBar, Popover } from 'antd-mobile'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import searchStyles from '@/pages/notice/index/index.module.less'
import { SearchOutline, DownOutline } from 'antd-mobile-icons'
import { observer, useLocalObservable } from 'mobx-react'
import { TRAIN_TABS } from './const'
import Store from './store'
import ClassManageList from './components/ClassManageList'
import TeachSendList from './components/TeachSendList'
import TrainPlanList from './components/TrainPlanList'
import SearchPicker from './components/SearchPicker'

interface SelectProps {
    label: string
    value: string
}

const MemoSearchPicker = memo(SearchPicker)

export default observer(() => {
    const { activeTab, setActiveTab, setParams, resetPrams } = useLocalObservable(() => Store)
    const [visible, setVisible] = useState<boolean>(false) // 控制popover
    const [pickerVisible, setPickerVisible] = useState<boolean>(false) // 培训计划picker控制

    const [activeSearchTab, setActiveSearchTab] = useState<Record<string, string>>({
        classManage: 'type',
        trainPlan: 'time',
        teachSend: 'type',
    }) // 不同tab选择的popover值

    const searchFiled = activeSearchTab[activeTab] // 需要被用于列表搜索的字段
    const popoverRef = useRef(null)
    const searchRef = useRef(null)
    const isRenderPicker = ['time', 'states'].includes(searchFiled) // 时间和状态需要调用picker

    function renderList() {
        switch (activeTab) {
            case 'classManage':
                return <ClassManageList />
            case 'trainPlan':
                return <TrainPlanList />
            case 'teachSend':
                return <TeachSendList />
            default:
                return <ClassManageList />
        }
    }

    const onSearch = (value: string | string[]) => {
        const params = {
            [searchFiled]: value,
            search: true,
            page: 1,
        }
        setParams(params)
    }

    const pickerChange = (value: SelectProps[]) => {
        console.log(123123, value)
        let inputValue = value
            .filter(Boolean)
            .map(v => v.label)
            .join('')
        setTimeout(() => {
            searchRef.current.nativeElement.value = inputValue
            onSearch(
                value
                    .filter(Boolean)
                    .map(v => v.value)
                    .join(''),
            )
        })
    }

    useEffect(() => {
        return () => {
            resetPrams()
        }
    }, [])

    return (
        <div className={styles.page}>
            <NavBar title={'培训管理'} />
            <div className={styles.tabsView}>
                <Tabs
                    style={{
                        '--title-font-size': '16px',
                        lineHeight: '40px',
                        '--content-padding': '0',
                    }}
                    activeKey={activeTab}
                    onChange={setActiveTab}
                >
                    {TRAIN_TABS.map(item => {
                        const selectTypeLabel = item.searchTabs.find(
                            r => r.value === activeSearchTab[item.value],
                        )?.label
                        return (
                            <Tabs.Tab title={item.label} key={item.value}>
                                <div className={searchStyles.searchView}>
                                    <Popover
                                        content={
                                            <>
                                                {item.searchTabs.map(v => {
                                                    return (
                                                        <div
                                                            key={v.value}
                                                            style={{ padding: '12px 32px' }}
                                                            onClick={() => {
                                                                setActiveSearchTab(oldState => {
                                                                    let state = { ...oldState }
                                                                    state[item.value] = v.value
                                                                    return state
                                                                })
                                                                popoverRef.current?.hide()
                                                            }}
                                                        >
                                                            {v.label}
                                                        </div>
                                                    )
                                                })}
                                            </>
                                        }
                                        trigger="click"
                                        onVisibleChange={setVisible}
                                        placement="bottom-start"
                                        ref={popoverRef}
                                    >
                                        <div
                                            className={searchStyles.popoverView}
                                            onClick={() => {
                                                popoverRef.current?.show()
                                            }}
                                        >
                                            <span className={searchStyles.drownTitle}>
                                                {selectTypeLabel}
                                            </span>
                                            <DownOutline
                                                className={
                                                    visible
                                                        ? searchStyles.upIcon
                                                        : searchStyles.downIcon
                                                }
                                                fontSize={12}
                                                color="#333"
                                            />
                                            <div className={searchStyles.line} />
                                        </div>
                                    </Popover>
                                    <div className={searchStyles.line} />
                                    <SearchBar
                                        placeholder="请输入要搜索的内容"
                                        clearable={false}
                                        ref={searchRef}
                                        className={searchStyles.searchBarView}
                                        style={{ '--height': '33px' }}
                                        icon={<SearchOutline className={searchStyles.searchIcon} />}
                                        onSearch={onSearch}
                                        onFocus={() => isRenderPicker && setPickerVisible(true)}
                                        onBlur={() => setPickerVisible(false)}
                                    />
                                </div>
                            </Tabs.Tab>
                        )
                    })}
                </Tabs>
            </div>
            {renderList()}
            <MemoSearchPicker
                visible={pickerVisible}
                type={searchFiled as 'time' | 'states'}
                setVisible={setPickerVisible}
                // value={pickerValue}
                onChange={pickerChange}
            />
        </div>
    )
})
